<template>
  <div class="center_input">
    <div class="buysell_trad">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="限价交易" name="first">
            <div class="mod-body">
              <div class="single-panel limit bor-right">
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                  <el-form-item label="买入价">
                    <div class="flex">
                      <el-input v-model="formLabelAlign.name" size="small"></el-input>
                      <span class="r_name">USDT</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="买入量">
                    <div class="flex">
                      <el-input v-model="formLabelAlign.region" size="small"></el-input>
                      <span class="r_name">BTC</span>
                    </div> 
                  </el-form-item>
                </el-form>
                <div class="t_plan">
                  <div class="block">
                    <el-slider
                      v-model="value2"
                      :step="20"
                      show-stops>
                    </el-slider>
                  </div>
                </div>
                <div class="ex_tips">
                  <p> <span>交易额</span> <em>0.00000000 USDT</em> </p>
                </div>
                <div class="ex_btn">
                  <el-button type="" >登录或注册</el-button>
                </div>
              </div>
              <!-- <div class="single-panel limit">

              </div> -->
              <div class="single-panel limit">
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                  <el-form-item label="卖出价">
                    <div class="flex">
                      <el-input v-model="formLabelAlign.name" size="small"></el-input>
                      <span class="r_name">USDT</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="卖出量">
                    <div class="flex">
                      <el-input v-model="formLabelAlign.region" size="small"></el-input>
                      <span class="r_name">BTC</span>
                    </div> 
                  </el-form-item>
                </el-form>
                <div class="t_plan">
                  <div class="block">
                    <el-slider
                      v-model="value2"
                      :step="20"
                      show-stops>
                    </el-slider>
                  </div>
                </div>
                <div class="ex_tips">
                  <p> <span>交易额</span> <em>0.00000000 USDT</em> </p>
                </div>
                <div class="ex_btn">
                  <el-button type="" >登录或注册</el-button>
                </div>
              </div>
              <!-- end -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="市价交易" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="止盈止损" name="third">角色管理</el-tab-pane>
        </el-tabs>
      </template>
      
    </div>
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  name: "coin-Tab",
  data() {
    return {
      mainCoinModel: mainCoinModel,
      currentId: 0,
      tableData: null,
      showLoading: true,
      activeName: "first",
      labelPosition: 'right',
      formLabelAlign: {
          name: '9178.96',
          region: '',
          type: ''
      },
      value2: 0
    };
  },
  mounted() {},
  destroyed() {},
  methods: {
    formatter(row, column) {
      return row.rise;
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    // 获取自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentId = "opt";
      customList && customList.length > 0 && (this.tableData = customList);
    },
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.center_input{
  background-color: #171b2b;
  margin-top: 6px;
  height: 274px;
}
.buysell_trad{
  .mod-body {
    height: calc(100% - 32px);
    position: relative;
    display: flex;
    flex-direction: row;
  }
  .single-panel {
    width: 100%;
    height: 100%;
  }
    .t_plan{
    padding:0 30px;
  }
  .ex_tips{
    height: 20px;line-height: 20px;padding:0 20px;
    span{font-size: 12px;}
		em{}
  }
  .ex_btn{
    padding:0 20px;margin-top:15px;
    button{width: 100%;}
  }
  .r_name{display: inline-block;width: 80px;text-align: center;}
}

</style>